<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Window-target" content="_top">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <!-- InstanceBeginEditable name="doctitle" -->
    <title>JSON 在线解析-[[${#params.value("website_logo_words")}]]</title>
    <!-- InstanceEndEditable -->
	<meta name="Author" th:content='${#params.value("author_name")}'>
	<meta name="Copyright" th:content='${#params.value("author_name")}'>
	<meta name="keywords" th:content='${#params.value("key_word")}' />
	<meta name="description" th:content='${#params.value("website_info_title")}'/>


	<link href="/css/loading.css" rel="stylesheet" />
	<link href="/css/scroll-bar.css" rel="stylesheet" />
	<link href="/lib/layui-v2.3.0/css/layui.css" rel="stylesheet" media="all" />
	<link href="/css/common.css" rel="stylesheet" />
	<link href="/css/suspension.css" rel="stylesheet" />
	<link href="/css/animate.css" rel="stylesheet" />
	<link href="/Eextend/iconfont/iconfont.css" rel="stylesheet" />
	<script src="/Eextend/iconfont/iconfont.js"></script>
	<script src="/js/jquery.min.js"></script>
	<script src="/lib/layui-v2.3.0/layui.js"></script>
	<script src="/js/wow.min.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

	<link rel="stylesheet" type="text/css" href="/Eextend/jsoneditor/jsoneditor.min.css" />
	<script type="text/javascript" src="/Eextend/jsoneditor/jsoneditor.min.js"></script>
	<script type="text/javascript" src="/Eextend/jsoneditor/ObjTree.min.js"></script>
	<script type="text/javascript" src="/Eextend/jsoneditor/jquery.format.js"></script>
	<style>
		div.jsoneditor-menu {
			background-color: #1e9fff;
		}
		.pull-right {
			float: right!important;
		}

		label {
			display: inline-block;
			max-width: 100%;
			margin-bottom: 5px;
			font-weight: 700;
		}
	</style>
</head>
<body>
<!--
           ▄              ▄
          ▌▒█           ▄▀▒▌
          ▌▒▒▀▄        ▀▒▒▒▐
         ▐▄▀▒▒▀▀▀▀▄▄▄▀▒▒▒▒▒▐
       ▄▄▀▒▒▒▒▒▒▒▒▒▒▒█▒▒▄█▒▐
     ▄▀▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒█▒▒▒▒▒▐
    ▐▒▒▒▄▄▄▒▒▒▒▒▒▒▒▒▒▒▒▒▀▄▒▒▌
    ▌▒▒▐▄█▀▒▒▒▒▄▀█▄▒▒▒▒▒▒▒█▒▐
   ▐▒▒▒▒▒▒▒▒▒▒▒▌██▀▒▒▒▒▒▒▒▒▀▄▌
   ▌▒▀▄██▄▒▒▒▒▒▒▒▒▒▒▒░░░░▒▒▒▒▌
   ▌▀▐▄█▄█▌▄▒▀▒▒▒▒▒▒░░░░░░▒▒▒▐
  ▐▒▀▐▀▐▀▒▒▄▄▒▄▒▒▒  typecho  ▒▌
  ▐▒▒▒▀▀▄▄▒▒▒▄▒▒▒▒▒▒░░░░░░▒▒▒▐
   ▌▒▒▒▒▒▒▀▀▀▒▒▒▒▒▒▒▒░░░░▒▒▒▒▌
   ▐▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▐
    ▀ yo-du ▒▒▒▒▒▒▒▒▒▒▒▄▒▒▒▒▌
      ▀▄▒▒▒▒▒▒▒▒▒▒▄▄▄▀▒▒▒▒▄▀
     ▐▀▒▀▄▄▄▄▄▄▀▀▀▒▒▒▒▒▄▄▀
    ▐▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▀▀

    --你好，世界！生活，从敲的第一行代码开始。
-->

<div th:replace="/common/fragment :: frontendHeadher"></div>
<!--<section class="bg-overlay layui-hide">-->
<!--<div class="overlay"></div>-->
<!--<div class="layui-row text py-5">-->
<!--<p class="lead">Keep on going never give up.</p>-->
<!--<h1>-->
<!--我为你翻山越岭，却无心看风景-->
<!--</h1>-->
<!--<a href="#welcome" class="layui-btn layui-btn-normal layui-btn-radius layui-btn-lg">Let's Go</a>-->
<!--</div>-->
<!--</section>-->
<section class="container">
	<div class="layui-container">
		<div class="layui-card" style="margin-top: 30px;">
			<div class="layui-card-header">
				<button type="button" class="layui-btn layui-btn-normal" id="submitBTN"  ><i class="layui-icon">&#xe622;</i>格式化</button>
				<button type="button" class="layui-btn" id="submitBTN2"><i class="layui-icon">&#xe758;</i> 压缩</button>
				<button type="button" class="layui-btn" id="submitBTN3">验证</button>
				<button type="button" class="layui-btn" id="submitBTN4">JSON 转 XML</button>
				<button type="button" class="layui-btn" id="submitBTN5">JSON 转 YAML</button>
				<label class="pull-right"><strong style="font-size: 16px"><i class="layui-icon">&#xe639;</i> JSON 在线解析</strong></label>
			</div>
			<div class="layui-card-body layui-row layui-col-space20">
				<div class="layui-col-md6"><div id="jsoneditor1"  style="height: 600px; width: 100%"></div></div>
				<div class="layui-col-md6"><div id="jsoneditor2" style="height: 600px; width: 100%"></div></div>
			</div>
		</div>
	</div>
</section>

<!--<script src="/Eextend/ace/ace.js"></script>-->
<!--<script src="/Eextend/ace/ext-language_tools.js"></script>-->

<div th:replace="/common/fragment :: frontendFooter"></div>
<div th:replace="/common/fragment :: frontendLongin"></div>


<script>
    layui.use(['layer','element'], function(){
        var layer = layui.layer;
        var element = layui.element;
		var container1 = document.getElementById('jsoneditor1');
		var container2 = document.getElementById('jsoneditor2');

		var optionsOutput1 = {
			mode : 'code',
			error : function(err) {
				alert('EF1 ->' + err.toString());
			}
		};

		var optionsOutput2 = {
			mode : 'tree',
			modes : [ 'view', 'form', 'text','code', 'tree'], // allowed modes
			error : function(err) {
				alert('EF1 ->' + err.toString());
			}
		};
		var json ={"sites":{"site":[{"id":"1","name":"小海豚博客","url":"www.nonelonely.com"},{"id":"2","name":"邮箱","url":"admin@nonelonely.com"},{"id":"3","name":"baidu","url":"www.baidu.com"}]}};
		var editor1 = new JSONEditor(container1, optionsOutput1, json);
		var editor2 = new JSONEditor(container2, optionsOutput2, json);
		editor2.expandAll();
        $("#submitBTN").click(function() {
			var content = editor1.getText();

			if (content.trim().length == 0) {
				return false;
			}
			try {

				var jsonStr = editor1.getText();

				var jsonObject = JSON.parse(jsonStr);
				editor1.setMode("code");
				editor1.setText(JSON.stringify(jsonObject, null, 2));

				editor2.setText(JSON.stringify(jsonObject, null, 0));
				editor2.setMode("tree");
				editor2.expandAll()


			} catch (e) {
                layer.msg("JSON 数据错误");
			}
        });
        $("#submitBTN2").click(function() {

			var content = editor1.getText();

			if (content.trim().length == 0) {
				return false;
			}


			try {
				var jsonStr = editor1.getText();

				var jsonObject = JSON.parse(jsonStr);

				editor1.setMode("code");
				editor1.setText(JSON.stringify(jsonObject, null, 0));
				editor2.setText(JSON.stringify(jsonObject, null, 0));
				editor2.setMode("tree");

				editor2.expandAll()
			} catch (e) {
                layer.msg("JSON 数据错误");
			}
		});
		$("#submitBTN3").click(function() {
			var content = editor1.getText();

			if (content.trim().length == 0) {
				return false;
			}

			try {
				var jsonStr = editor1.getText();
				var json = JSON.parse(jsonStr);
				layer.msg("JSON 数据合法");
			} catch (e) {
				layer.msg("JSON 数据错误");
			}

		});
        $("#submitBTN4").click(function() {
            var content = editor1.getText();

            if (content.trim().length == 0) {
                return false;
            }


            try {
                var jsonStr = editor1.getText();
                var json = JSON.parse(jsonStr);
                var xotree = new XML.ObjTree();
                var xml = xotree.writeXML(json);
                xml = decodeSpecialCharacter(xml);
                editor2.setMode("text");
                formatXML =  $.format(xml, {method: 'xml'});
                editor2.setText(formatXML);
            } catch (e) {
                layer.msg("JSON 数据错误");
            }
        });
        function decodeSpecialCharacter(str) {
            return str.replace(/\&amp;/g, '&').replace(/\&gt;/g, '>').replace(/\&lt;/g,
                '<').replace(/\&quot;/g, '"');
        }
        $("#submitBTN5").click(function() {

            var content = editor1.getText();

            if (content.trim().length == 0) {
                return false;
            }

            try {
                var jsonStr = editor1.getText();
                var yaml = json2yaml(jsonStr);
                editor2.setMode("text");
                editor2.setText(yaml);
            } catch (e) {
                layer.msg("JSON 数据错误");
            }
            last_action = "jsonToyaml";
        });

        var spacing = " ";
        function json2yaml(obj) {

            if (typeof obj == 'string') {
                obj = JSON.parse(obj);
            }


            var ret = [];

            convert(obj, ret);
            return ret.join("\n");
        };


        function getType(obj) {
            var type = typeof obj;

            if (obj instanceof Array) {
                return 'array';
            } else if (type == 'string') {
                return 'string';
            } else if (type == 'boolean') {
                return 'boolean';
            } else if (type == 'number') {
                return 'number';
            } else if (type == 'undefined' || obj === null) {
                return 'null';
            } else {
                return 'hash';
            }
        }

        function convert(obj, ret) {
            var type = getType(obj);

            switch(type) {
                case 'array':
                    convertArray(obj, ret);
                    break;
                case 'hash':
                    convertHash(obj, ret);
                    break;
                case 'string':
                    convertString(obj, ret);
                    break;
                case 'null':
                    ret.push('null');
                    break;
                case 'number':
                    ret.push(obj.toString());
                    break;
                case 'boolean':
                    ret.push(obj ? 'true' : 'false');
                    break;
            }
        }
        function convertArray(obj, ret) {
            for (var i=0; i<obj.length; i++) {
                var ele = obj[i];
                var recurse = [];
                convert(ele, recurse);

                for (var j=0; j<recurse.length; j++) {
                    ret.push((j == 0 ? "- \n   " : spacing) + recurse[j]);
                }
            }
        }
        function convertHash(obj, ret) {
            for (var k in obj) {
                var recurse = [];
                if (obj.hasOwnProperty(k)) {
                    var ele = obj[k];
                    convert(ele, recurse);
                    var type = getType(ele);
                    if (type == 'string' || type == 'null' || type == 'number' || type == 'boolean') {
                        ret.push(normalizeString(k) + ': ' + recurse[0]);
                    } else {
                        ret.push(normalizeString(k) + ': ');
                        for (var i=0; i<recurse.length; i++) {
                            ret.push(spacing + recurse[i]);
                        }
                    }
                }
            }
        }

        function normalizeString(str) {
            if (str.match(/^[\w]+$/)) {
                return str;
            } else {
                return JSON.stringify(str);
            }
        }

        function convertString(obj, ret) {
            ret.push(normalizeString(obj));
        }
    });
</script>
</body>
</html>
